<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基层AI辅助诊断系统 - 用户管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; background: #FFFFFF; color: var(--text-primary); font-size: 14px; line-height: 1.5; margin: 0; }
        :root { --primary: #0F6CBD; --primary-light: #D0E7FF; --primary-dark: #0A4F8D; --success: #0F8A5F; --warning: #F59337; --error: #D13438; --info: #0078D4; --text-primary: #1A1A1A; --text-secondary: #4D4D4D; --text-tertiary: #767676; --text-disabled: #A6A6A6; --border-strong: #CCCCCC; --border-normal: #E0E0E0; --border-light: #F0F0F0; --divider: #F5F5F5; --bg-primary: #FFFFFF; --bg-secondary: #F9F9F9; --bg-card: #FFFFFF; --bg-disabled: #F5F5F5; --spacing-2: 2px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --font-page-title: 20px; --font-card-title: 16px; --font-table-title: 14px; --font-body: 14px; --font-table: 13px; --font-small: 12px; --line-height-title: 1.4; --line-height-body: 1.5; --line-height-table: 1.2; --line-height-form: 1.4; --radius-small: 2px; --radius-medium: 4px; --transition-fast: 150ms; --transition-normal: 200ms; --transition-slow: 300ms; --nav-item-width: 140px; }
        .container { width: 100%; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg-secondary); }
        .header { height: 60px; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-normal); display: flex; align-items: center; padding: 0 var(--spacing-24); box-shadow: 0 2px 4px rgba(0,0,0,0.05); position: relative; z-index: 100; }
        .header-spacer { width: 200px; flex-shrink: 0; }
        #app-nav { position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; width: calc(100% - 400px); display: flex; justify-content: center; }
        .el-menu { border: none !important; background-color: transparent !important; }
        .el-menu--horizontal > .el-menu-item, .el-menu--horizontal > .el-sub-menu .el-sub-menu__title { height: 60px; line-height: 60px; color: var(--text-secondary); font-weight: 500; font-size: var(--font-body); padding: 0; width: var(--nav-item-width); text-align: center; display: flex; align-items: center; justify-content: center; position: relative; }
        .el-sub-menu__icon-arrow { display: none !important; }
        .el-menu--horizontal > .el-sub-menu .el-sub-menu__title::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 8px; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
        .el-sub-menu:hover > .el-sub-menu__title::after, .el-sub-menu.is-active > .el-sub-menu__title::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
        .el-sub-menu.is-opened > .el-sub-menu__title::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>"); }
        .el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title { color: var(--primary) !important; border-bottom: 2px solid var(--primary); font-weight: 500; }
        .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-sub-menu:not(.is-disabled):hover .el-sub-menu__title { color: var(--primary); background-color: transparent; }
        .el-menu--popup { width: var(--nav-item-width) !important; min-width: var(--nav-item-width) !important; max-width: var(--nav-item-width) !important; border-radius: var(--radius-small); padding: 4px 0; border: 1px solid var(--border-light); border-top: 2px solid var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center !important; }
        .el-menu--popup .el-menu-item { height: 36px; line-height: 36px; padding: 0 !important; color: var(--text-secondary); white-space: nowrap; text-align: center; width: var(--nav-item-width) !important; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; display: flex !important; justify-content: center !important; align-items: center !important; font-size: var(--font-body); }
        .el-menu--popup .el-menu-item:hover { background-color: var(--bg-secondary); color: var(--primary); }
        .user-section { display: flex; align-items: center; gap: var(--spacing-16); margin-left: auto; z-index: 10; width: 200px; justify-content: flex-end; flex-shrink: 0; cursor: pointer; padding: 8px 12px; border-radius: var(--radius-small); transition: background-color var(--transition-fast); color: var(--text-secondary); }
        .user-section:hover { background-color: var(--bg-secondary); }
        .user-name { font-weight: 500; font-size: var(--font-body); color: var(--text-secondary); }
        .user-arrow { color: var(--text-tertiary); transition: color var(--transition-normal); }
        .user-section:hover .user-arrow { color: var(--primary); }

        .main-content { padding: 0; flex: 1; background-color: var(--bg-primary); width: 100%; }
        .combined-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-24); border-bottom: 1px solid var(--border-light); background-color: var(--bg-primary); }
        .page-title { font-size: var(--font-page-title); font-weight: 600; color: var(--text-primary); line-height: var(--line-height-title); margin-right: var(--spacing-24); white-space: nowrap; }
        .filter-container { display: flex; align-items: center; gap: var(--spacing-16); flex-wrap: nowrap; }
        .search-box { position: relative; width: 240px; }
        .search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
        .search-box input { width: 100%; padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) 32px; border: 1px solid var(--border-normal); border-radius: var(--radius-small); font-size: 14px; color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s; height: 32px; }
        .search-box input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(15,108,189,0.2); }
        .select { height: 32px; border: 1px solid var(--border-normal); border-radius: var(--radius-small); padding: 0 var(--spacing-12); font-size: var(--font-body); color: var(--text-primary); }
        .btn { padding: var(--spacing-8) var(--spacing-16); border-radius: var(--radius-small); font-size: var(--font-body); font-weight: 500; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-normal); gap: var(--spacing-8); height: 32px; line-height: 1; }
        .btn-primary { background-color: var(--primary); color: #fff; }
        .btn-primary:hover { background-color: var(--primary-dark); }
        .btn-default { background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border-normal); }
        .btn-default:hover { background-color: var(--bg-secondary); }

        .table-section { padding: var(--spacing-24); display: flex; flex-direction: column; gap: var(--spacing-24); background-color: var(--bg-primary); }
        .table-container { background-color: var(--bg-primary); border-radius: var(--radius-small); box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: auto; margin-bottom: var(--spacing-16); border: 1px solid var(--border-light); }
        .data-table { width: 100%; border-collapse: collapse; }
        .data-table th { background-color: var(--bg-secondary); padding: var(--spacing-12) var(--spacing-16); text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border-normal); height: 40px; font-size: var(--font-table-title); }
        .data-table td { padding: var(--spacing-12) var(--spacing-16); border-bottom: 1px solid var(--border-light); color: var(--text-secondary); height: 40px; vertical-align: middle; font-size: var(--font-table); }
        .data-table tr:hover { background-color: var(--bg-secondary); }
        .operations { display: inline-flex; gap: var(--spacing-8); }
        .operation-link { color: var(--primary); text-decoration: none; cursor: pointer; }
        .operation-link:hover { color: var(--primary-dark); }
        .empty-table-message { text-align: center; color: var(--text-tertiary); padding: var(--spacing-16); font-style: italic; }

        .table-footer { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-16) var(--spacing-24); }
        .pagination-text { color: var(--text-tertiary); font-size: var(--font-small); }
        .pagination-controls { display: flex; align-items: center; gap: var(--spacing-24); }
        .page-numbers { display: flex; gap: var(--spacing-8); }
        .page-numbers button { min-width: 32px; height: 32px; border-radius: var(--radius-small); border: 1px solid var(--border-normal); background: var(--bg-primary); cursor: pointer; color: var(--text-secondary); transition: all var(--transition-normal); display: flex; align-items: center; justify-content: center; font-size: var(--font-small); }
        .page-numbers button:hover { border-color: var(--primary); color: var(--primary); }
        .page-numbers button.active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
        .pagination-size { display: flex; align-items: center; gap: var(--spacing-8); color: var(--text-secondary); font-size: var(--font-small); }
        .page-size-selector { height: 32px; border: 1px solid var(--border-normal); border-radius: var(--radius-small); padding: 0 var(--spacing-8); font-size: var(--font-small); margin: 0 var(--spacing-4); }

        /* 弹窗通用 */
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
        .modal { background-color: var(--bg-primary); border-radius: var(--radius-small); box-shadow: 0 4px 16px rgba(0,0,0,0.1); width: 720px; max-width: 90%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
        .modal-header { padding: var(--spacing-16) var(--spacing-24); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
        .modal-title { font-size: var(--font-card-title); font-weight: 600; color: var(--text-primary); }
        .modal-close { background: none; border: none; cursor: pointer; color: var(--text-tertiary); font-size: 20px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; }
        .modal-close:hover { background-color: var(--bg-secondary); color: var(--text-secondary); }
        .modal-body { padding: var(--spacing-24); overflow-y: auto; }
        .modal-footer { padding: var(--spacing-16) var(--spacing-24); border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: var(--spacing-16); }

        .form-group { margin-bottom: var(--spacing-16); }
        .form-label { display: block; margin-bottom: var(--spacing-8); font-weight: 500; color: var(--text-secondary); }
        .form-control { width: 100%; padding: var(--spacing-8) var(--spacing-12); border: 1px solid var(--border-normal); border-radius: var(--radius-small); font-size: var(--font-body); color: var(--text-primary); transition: border-color var(--transition-normal); height: 36px; }
        .form-control:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(15,108,189,0.2); }
        textarea.form-control { min-height: 100px; resize: vertical; }

        @media (max-width: 768px) {
            .header { flex-wrap: wrap; padding: var(--spacing-12) var(--spacing-16); height: auto; }
            .header-spacer { width: 100%; justify-content: center; margin-bottom: 8px; }
            #app-nav { position: relative; left: 0; transform: none; width: 100%; order: 3; margin-top: var(--spacing-8); }
            .combined-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }
            .filter-container { flex-wrap: wrap; }
            .search-box { width: 100%; }
            .table-footer { flex-direction: column; gap: var(--spacing-16); align-items: flex-start; }
            .pagination-controls { flex-direction: column; gap: var(--spacing-16); align-items: flex-start; width: 100%; }
            .page-numbers { flex-wrap: wrap; }
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const { createApp, ref } = Vue;
            const navApp = createApp({
                setup() {
                    const activeIndex = ref('8');
                    const handleSelect = (key, keyPath) => { console.log(key, keyPath); };
                    return { activeIndex, handleSelect };
                }
            });
            navApp.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
            navApp.mount('#app-nav');

            const userSection = document.getElementById('userSection');
            const userDropdown = document.getElementById('userDropdown');
            if (userSection && userDropdown) {
                userSection.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const isOpen = userDropdown.style.display === 'block';
                    userDropdown.style.display = isOpen ? 'none' : 'block';
                });
                document.addEventListener('click', function() { userDropdown.style.display = 'none'; });
            }

            // 模拟数据
            const users = [
                { id: 'u001', username: 'admin',   role: '系统管理员', org: '县卫生局',   rawPhone: '13800000000', status: 'enabled',  email: 'admin@example.com' },
                { id: 'u002', username: 'zhang01', role: '医生',     org: '城关卫生院', rawPhone: '13812341234', status: 'enabled',  email: 'zhang@example.com' },
                { id: 'u003', username: 'li02',    role: '护士',     org: '城关卫生院', rawPhone: '13956785678', status: 'enabled',  email: 'li@example.com' },
                { id: 'u004', username: 'wang03',  role: '数据分析员', org: '县卫生局',  rawPhone: '13590129012', status: 'disabled', email: 'wang@example.com' }
            ];

            let filtered = [...users];
            let pageSize = 10; let currentPage = 1; let totalPages = 1;

            // DOM refs
            const keywordEl = document.getElementById('keyword');
            const statusEl = document.getElementById('statusFilter');
            const roleEl = document.getElementById('roleFilter');
            const orgEl = document.getElementById('orgFilter');
            const queryBtn = document.getElementById('queryBtn');
            const resetBtn = document.getElementById('resetBtn');
            const createBtn = document.getElementById('createBtn');
            const bodyEl = document.getElementById('userBody');
            const totalEl = document.getElementById('totalRecords');
            const pagesEl = document.getElementById('pageNumbers');
            const pageSizeEl = document.getElementById('pageSizeSelector');

            function renderTable() {
                const start = (currentPage - 1) * pageSize;
                const end = start + pageSize;
                const pageData = filtered.slice(start, end);
                bodyEl.innerHTML = '';
                if (pageData.length === 0) {
                    const row = document.createElement('tr');
                    row.innerHTML = `<td colspan="6" class="empty-table-message">暂无用户</td>`;
                    bodyEl.appendChild(row);
                } else {
                    pageData.forEach(u => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${escapeHtml(u.username)}</td>
                            <td>${escapeHtml(u.role)}</td>
                            <td>${escapeHtml(u.org)}</td>
                            <td>${escapeHtml(maskPhone(u.rawPhone || ''))}</td>
                            <td>${u.status==='enabled'?'启用':'停用'}</td>
                            <td>
                                <div class="operations">
                                    <a class="operation-link" data-op="edit" data-id="${u.id}">编辑</a>
                                    <a class="operation-link" data-op="reset" data-id="${u.id}">重置密码</a>
                                    <a class="operation-link" data-op="delete" data-id="${u.id}" style="color: var(--error);">删除</a>
                                </div>
                            </td>`;
                        bodyEl.appendChild(row);
                    });
                }
                totalEl.textContent = filtered.length;
                renderPagination();
            }

            function renderPagination() {
                totalPages = Math.ceil(filtered.length / pageSize) || 1;
                pagesEl.innerHTML = '';
                let start = Math.max(1, currentPage - 2);
                let end = Math.min(totalPages, start + 4);
                if (end - start < 4 && totalPages > 4) start = Math.max(1, end - 4);
                for (let i = start; i <= end; i++) {
                    const btn = document.createElement('button');
                    btn.textContent = i; btn.className = i === currentPage ? 'active' : '';
                    btn.addEventListener('click', () => { currentPage = i; renderTable(); });
                    pagesEl.appendChild(btn);
                }
            }

            function applyFilter(){
                const kw = keywordEl.value.trim().toLowerCase();
                const st = statusEl.value; const rl = roleEl.value; const og = orgEl.value;
                filtered = users.filter(u => {
                    const matchKw = kw ? (u.username.toLowerCase().includes(kw) || (u.email||'').toLowerCase().includes(kw)) : true;
                    const matchSt = st==='all' ? true : (st==='enabled' ? u.status==='enabled' : u.status==='disabled');
                    const matchRole = rl==='all' ? true : (u.role && (u.role===rl));
                    const matchOrg = og==='all' ? true : (u.org && (u.org===og));
                    return matchKw && matchSt && matchRole && matchOrg;
                });
                currentPage = 1; renderTable();
            }

            function resetFilter(){
                keywordEl.value=''; statusEl.value='all'; roleEl.value='all'; orgEl.value='all';
                filtered=[...users]; currentPage=1; renderTable();
            }

            // 事件绑定
            queryBtn.addEventListener('click', applyFilter);
            keywordEl.addEventListener('keypress', e => { if (e.key==='Enter') applyFilter(); });
            resetBtn.addEventListener('click', resetFilter);
            pageSizeEl.addEventListener('change', () => { pageSize = parseInt(pageSizeEl.value, 10); currentPage = 1; renderTable(); });

            // 操作代理
            document.addEventListener('click', function(e){
                const link = e.target.closest('a.operation-link');
                if (!link) return;
                const id = link.getAttribute('data-id');
                const op = link.getAttribute('data-op');
                if (op==='edit') openEdit(id);
                if (op==='delete') openDelete(id);
                if (op==='reset') openReset(id);
            });

            // 编辑弹窗
            const editModal = document.getElementById('editModal');
            const closeEdit = document.getElementById('closeEdit');
            const cancelEdit = document.getElementById('cancelEdit');
            const saveEdit = document.getElementById('saveEdit');
            const userName = document.getElementById('userName');
            const userPhone = document.getElementById('userPhone');
            const userEmail = document.getElementById('userEmail');
            const orgSelect = document.getElementById('orgSelect');
            const statusEnabled = document.getElementById('statusEnabled');
            const roleSelect = document.getElementById('roleSelect');
            let editingId = null;
            createBtn.addEventListener('click', ()=> { editingId=null; userName.value=''; userPhone.value=''; userEmail.value=''; orgSelect.value=''; statusEnabled.checked=true; roleSelect.value=''; editModal.style.display='flex'; });
            closeEdit.addEventListener('click', ()=> editModal.style.display='none');
            cancelEdit.addEventListener('click', ()=> editModal.style.display='none');
            editModal.addEventListener('click', e => { if (e.target===editModal) editModal.style.display='none'; });
            function openEdit(id){
                const u = users.find(x => x.id===id); if (!u) return;
                editingId = id; userName.value = u.username; userPhone.value = (u.rawPhone||'').replace(/\D/g,''); userEmail.value = u.email||''; orgSelect.value = u.org; statusEnabled.checked = u.status==='enabled'; roleSelect.value = u.role;
                editModal.style.display='flex';
            }
            saveEdit.addEventListener('click', ()=>{
                const name = userName.value.trim(); if (!name) { alert('请输入用户名'); return; }
                const phone = userPhone.value.trim(); const digits = phone.replace(/\D/g,''); if (!/^\d{11}$/.test(digits)) { alert('请输入有效手机号'); return; }
                if (editingId) {
                    const u = users.find(x => x.id===editingId); if (u) { u.username=name; u.rawPhone=digits; u.email=userEmail.value.trim(); u.org=orgSelect.value; u.status = statusEnabled.checked ? 'enabled':'disabled'; u.role=roleSelect.value; }
                } else {
                    const id = 'u' + Math.random().toString().slice(2,6);
                    const newUser = { id, username:name, rawPhone: digits, email:userEmail.value.trim(), org:orgSelect.value, status: statusEnabled.checked ? 'enabled':'disabled', role: roleSelect.value };
                    users.unshift(newUser);
                }
                editModal.style.display='none'; applyFilter();
            });

            // 删除确认
            const deleteModal = document.getElementById('deleteModal');
            const closeDelete = document.getElementById('closeDelete');
            const cancelDelete = document.getElementById('cancelDelete');
            const confirmDelete = document.getElementById('confirmDelete');
            let deleteId = null;
            function openDelete(id){ deleteId = id; deleteModal.style.display='flex'; }
            closeDelete.addEventListener('click', ()=> deleteModal.style.display='none');
            cancelDelete.addEventListener('click', ()=> deleteModal.style.display='none');
            deleteModal.addEventListener('click', e => { if (e.target===deleteModal) deleteModal.style.display='none'; });
            confirmDelete.addEventListener('click', ()=>{ if(deleteId){ const idx = users.findIndex(n=>n.id===deleteId); if(idx>-1) users.splice(idx,1); deleteModal.style.display='none'; applyFilter(); }});

            // 重置密码弹窗
            const resetModal = document.getElementById('resetModal');
            const closeReset = document.getElementById('closeReset');
            const cancelReset = document.getElementById('cancelReset');
            const confirmReset = document.getElementById('confirmReset');
            const resetUser = document.getElementById('resetUser');
            const modeRand = document.getElementById('modeRand');
            const modeManual = document.getElementById('modeManual');
            const newPwd = document.getElementById('newPwd');
            const confirmPwd = document.getElementById('confirmPwd');
            function openReset(id){ const u=users.find(x=>x.id===id); if(!u) return; resetUser.textContent = `${u.username} (${u.role})`; modeRand.checked=true; newPwd.value=''; confirmPwd.value=''; togglePwdArea(); resetModal.style.display='flex'; }
            function togglePwdArea(){ const show = modeManual.checked; newPwd.disabled=!show; confirmPwd.disabled=!show; if(!show){ newPwd.value=''; confirmPwd.value=''; } }
            modeRand.addEventListener('change', togglePwdArea); modeManual.addEventListener('change', togglePwdArea);
            closeReset.addEventListener('click', ()=> resetModal.style.display='none');
            cancelReset.addEventListener('click', ()=> resetModal.style.display='none');
            resetModal.addEventListener('click', e => { if (e.target===resetModal) resetModal.style.display='none'; });
            confirmReset.addEventListener('click', ()=>{
                if (modeManual.checked) {
                    const p1=newPwd.value.trim(), p2=confirmPwd.value.trim();
                    if (!p1 || p1.length<6) { alert('请输入至少6位的新密码'); return; }
                    if (p1!==p2) { alert('两次输入的密码不一致'); return; }
                }
                alert('密码已重置'); resetModal.style.display='none';
            });

            function escapeHtml(str){ if (!str && str!==0) return ''; return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\"/g,'&quot;').replace(/'/g,'&#39;'); }
            function maskPhone(p){ const d=String(p||'').replace(/\D/g,''); return /^\d{11}$/.test(d)? d.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3') : (p||''); }

            // 初始化
            applyFilter();
        });
    </script>
</head>
<body>
    <div id="app" class="container">
        <header class="header">
            <div class="header-spacer"></div>
            <div id="app-nav">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :ellipsis="false" :popper-offset="0" popper-class="custom-dropdown">
                    <el-menu-item index="1">开始问诊</el-menu-item>
                    <el-sub-menu index="2" popper-class="custom-dropdown">
                        <template #title>病历管理</template>
                        <el-menu-item index="2-1">病历查询</el-menu-item>
                        <el-menu-item index="2-2">病历模板</el-menu-item>
                        <el-menu-item index="2-3">个人药品</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="3">患者管理</el-menu-item>
                    <el-sub-menu index="4" popper-class="custom-dropdown">
                        <template #title>数据统计</template>
                        <el-menu-item index="4-1">诊断统计</el-menu-item>
                        <el-menu-item index="4-2">宏观统计</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="5">医学知识</el-menu-item>
                    <el-sub-menu index="6" popper-class="custom-dropdown">
                        <template #title>基础数据</template>
                        <el-menu-item index="6-1">药品管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="7" popper-class="custom-dropdown">
                        <template #title>消息通知</template>
                        <el-menu-item index="7-1">通知查看</el-menu-item>
                        <el-menu-item index="7-2">通知发布</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="8" popper-class="custom-dropdown">
                        <template #title>用户管理</template>
                        <el-menu-item index="8-1">用户管理</el-menu-item>
                        <el-menu-item index="8-2">角色管理</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
            <div class="user-section" id="userSection">
                <span class="user-name">管理员</span>
                <svg class="user-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
            </div>
            <div class="user-dropdown" id="userDropdown" style="display:none; position:absolute; top:60px; right:24px; width:160px; background:#fff; border:1px solid var(--border-light); border-radius:2px; box-shadow:0 4px 12px rgba(0,0,0,0.08); overflow:hidden; z-index:200;">
                <div class="item" style="padding:10px 12px; color:var(--text-secondary); cursor:pointer;">个人中心</div>
                <div class="item" style="padding:10px 12px; color:var(--text-secondary); cursor:pointer;">退出登录</div>
            </div>
        </header>

        <div class="main-content">
            <section class="combined-header">
                <h1 class="page-title">用户管理</h1>
                <div class="filter-container">
                    <div class="search-box">
                        <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                        <input id="keyword" type="text" placeholder="搜索用户...">
                    </div>
                    <select id="statusFilter" class="select">
                        <option value="all">用户状态: 全部</option>
                        <option value="enabled">启用</option>
                        <option value="disabled">停用</option>
                    </select>
                    <select id="roleFilter" class="select">
                        <option value="all">角色: 全部</option>
                        <option value="系统管理员">系统管理员</option>
                        <option value="医生">医生</option>
                        <option value="护士">护士</option>
                        <option value="数据分析员">数据分析员</option>
                    </select>
                    <select id="orgFilter" class="select">
                        <option value="all">所属机构: 全部</option>
                        <option value="县卫生局">县卫生局</option>
                        <option value="城关卫生院">城关卫生院</option>
                    </select>
                    <button id="queryBtn" class="btn btn-primary">查询</button>
                    <button id="resetBtn" class="btn btn-default">重置</button>
                    <button id="createBtn" class="btn btn-primary">新建用户</button>
                </div>
            </section>

            <section class="table-section">
                <div class="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>角色</th>
                                <th>所属机构</th>
                                <th>手机号</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="userBody"></tbody>
                    </table>
                </div>
                <div class="table-footer">
                    <div class="pagination-text">共 <span id="totalRecords">0</span> 条记录</div>
                    <div class="pagination-controls">
                        <div id="pageNumbers" class="page-numbers"></div>
                        <div class="pagination-size">
                            每页显示
                            <select id="pageSizeSelector" class="page-size-selector">
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="50">50</option>
                            </select>
                            条
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- 用户编辑弹窗 -->
    <div id="editModal" class="modal-overlay">
        <div class="modal" style="width: 680px;">
            <div class="modal-header">
                <h3 class="modal-title">编辑用户</h3>
                <button class="modal-close" id="closeEdit">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label" for="userName">用户名</label>
                    <input id="userName" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label class="form-label" for="userPhone">手机号</label>
                    <input id="userPhone" class="form-control" placeholder="请输入手机号">
                </div>
                <div class="form-group">
                    <label class="form-label" for="userEmail">邮箱</label>
                    <input id="userEmail" class="form-control" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label class="form-label" for="orgSelect">所属机构</label>
                    <select id="orgSelect" class="form-control">
                        <option value="城关卫生院">城关卫生院</option>
                        <option value="县卫生局">县卫生局</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">账号状态</label>
                    <div style="display:flex; gap:16px; align-items:center;">
                        <label style="display:flex; gap:8px; align-items:center;"><input id="statusEnabled" type="radio" name="accountStatus" value="enabled" checked> 启用</label>
                        <label style="display:flex; gap:8px; align-items:center;"><input type="radio" name="accountStatus" value="disabled"> 停用</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="roleSelect">选择角色</label>
                    <select id="roleSelect" class="form-control">
                        <option value="系统管理员">系统管理员</option>
                        <option value="医生">医生</option>
                        <option value="护士">护士</option>
                        <option value="数据分析员">数据分析员</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="cancelEdit">取消</button>
                <button class="btn btn-primary" id="saveEdit">保存</button>
            </div>
        </div>
    </div>

    <!-- 重置密码弹窗 -->
    <div id="resetModal" class="modal-overlay">
        <div class="modal" style="width: 520px;">
            <div class="modal-header">
                <h3 class="modal-title">重置密码</h3>
                <button class="modal-close" id="closeReset">×</button>
            </div>
            <div class="modal-body">
                <div style="margin-bottom:12px; color: var(--text-secondary);">用户: <span id="resetUser" style="color: var(--text-primary);"></span></div>
                <div class="form-group">
                    <label class="form-label">请选择重置方式</label>
                    <div style="display:flex; gap:16px; align-items:center;">
                        <label style="display:flex; gap:8px; align-items:center;"><input id="modeRand" type="radio" name="resetMode" value="rand" checked> 系统生成随机密码</label>
                        <label style="display:flex; gap:8px; align-items:center;"><input id="modeManual" type="radio" name="resetMode" value="manual"> 手动设置新密码</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="newPwd">新密码</label>
                    <input id="newPwd" class="form-control" placeholder="请输入新密码" disabled>
                </div>
                <div class="form-group">
                    <label class="form-label" for="confirmPwd">确认密码</label>
                    <input id="confirmPwd" class="form-control" placeholder="请再次输入新密码" disabled>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="cancelReset">取消</button>
                <button class="btn btn-primary" id="confirmReset">确认重置</button>
            </div>
        </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div id="deleteModal" class="modal-overlay">
        <div class="modal" style="width: 420px;">
            <div class="modal-header">
                <h3 class="modal-title">确认删除</h3>
                <button class="modal-close" id="closeDelete">×</button>
            </div>
            <div class="modal-body">
                <div style="text-align:center; color:var(--text-primary); margin-bottom:8px;">确定要删除该用户吗？</div>
                <div style="text-align:center; color:var(--text-tertiary); font-size:12px;">该操作不可恢复</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="cancelDelete">取消</button>
                <button class="btn btn-primary" id="confirmDelete">确定删除</button>
            </div>
        </div>
    </div>
</body>
</html>


